<!doctype html>
<html class="no-js" lang="zh" data-aspaniv-t lang-t="lang">

<head>
    <meta charset="utf-8" />
    <meta name="Author" content="LongBao">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    	<meta name="renderer" content="webkit">
    <title data-t="pages.index">登录-Long++ </title>
    <link rel="stylesheet" href="css/ff2.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
                        
    <meta name="description" content="LongBao 支付云 SDK 让你在 app 和网站中轻松加入支付功能。一次申请开通多个支付渠道，一次接入所有平台和支付方式，一站管理所有交易。" content-t="descriptions.index"/>
    <meta name="keywords" content=" longbao,龙宝,支付SDK,支付开发,支付接入,聚合支付,支付,app支付,移动应用支付,支付平台,在线支付,游戏支付,网上支付,网络支付,统一支付平台,手机支付平台,手机支付,手机网上支付,快捷支付,一键支付,电子支付,安全支付,第三方支付接口,支付宝支付,支付宝接口,移动支付,在线支付,第三方支付,支付平台,银联支付,银联在线支付,银联快捷支付,银行支付,网银支付平台,网银支付,pos支付,app支付,支付接口,支付API,支付宝接口,微信支付接口,银联支付接口,支付云服务,微信红包,红包SDK,微信支付,支付宝支付"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <style>
    	body{height: 70%;}
    #name_1{max-width: 500px;margin: 0 auto;
    margin-top: 17%;padding: 0 5%; 
    background-color: #FFF;
    opacity: 1;
    -webkit-transition: opacity, 0.4s; /* For Safari 3.1 to 6.0 */
    transition: opacity, 0.4s;}
    /*#2_W{opacity: 1;}*/
    #2_W:hover #name_1{opacity: 0;}
    #name_1>h2{text-align: center;margin: 30px;}
    .left_1{display: inline-block;width: 20%;}
    .right_1{display: inline-block;width: 70%;}
    form>div{border-bottom: solid 1px #000; margin-top: 17px;}
    .right_1 input{border: solid 0px #fff;margin-bottom: 0; font-size: .9rem}
    .right_1 input:focus{border: solid 0px #fff;background-color: #fff;}
    /*.right_1 input:focus div{background-color: #000}*/
    #button_1 {height: 35px; background-color: deepskyblue;width: 100%;display: inline-block;border-radius: 5px;color: #fff;padding: 6px 0}
    #button_1:hover{box-shadow: 0 0 5px #000;cursor:pointer;}
    i{font-weight: 100;}
    #http{border-bottom: solid 0 #fff;text-align: center;}
    #http span{font-style: 14px;}
    #http a{font-size: 14px;}
    #http input{margin: 0;padding-top: 10px;}
     input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset;}
    /*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
    }*/
    .red{color: red;}
    font{font-size: 12px;}
    i{margin-left:20px;}
    /*form input{font-size: 0.8rem ;}*/
   #h2 h2{display: inline-block;}
   #h2{display: block; margin: 0 auto;text-align: center;margin-left: 80px;}
   .info-img-6{background-image: url(img/qr-ping.png);background-repeat: no-repeat;max-width: 500px;margin: 0 auto;margin-top: 17%;padding: 0 5%; background-position: 50% 50%;}
    </style>
</head>

<body class="">
    <div class="top-bar-wrapper">
        <div class="row align-center">
            <div class="title-bar show-for-small-only">
                <!--<button id="hamburger" class="menu-icon" type="button" data-toggle></button>-->
                <div class="title-bar-title">
                    <a href="index.html" data-aspaniv-t href-t="route.root" title="LongPay 是深圳龙宝网络科技有限公司的注册商标">
                        <div class="top-bar__logo"></div>
                    </a>
                </div>
                <a id="hamburger" class="title-bar__toggle" target="_blank" data-toggle>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>

            <div class="small-11 medium-10 large-10 hide-for-small-only">
                <div class="top-bar">
                    <div class="top-bar-title">
                        <a href="index.html" data-aspaniv-t href-t="route.root">
                            <div class="top-bar__logo"></div>
                        </a>
                    </div>

                    <div class="top-bar-right">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <div class="top-bar-left">
                                <ul class="dropdown menu" data-dropdown-menu>
                                    <li class="is-dropdown-submenu-parent">
                                        <a href="#" data-t="top-nav.more" style="padding-right: 10px;">产品</a>
<ul class="menu vertical">
    <li>
        <a href="#" data-t="top-nav.account"><img src="img/account-system.svg" alt="">聚合支付</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.platform"><img src="img/aggregate-pay.svg" alt="">账户系统</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.dashboard"><img src="img/aggregate-pay.svg" alt="">商户系统</a>
    </li>
    <li>
        <a href="#" data-t="top-nav.financing"><img src="img/big-data.svg" alt="">大数据商业智能系统</a>
    </li>
</ul>
</li>
<li><a href="#">产品详情</a></li>
</ul>
</div>
<li class="is-dropdown-submenu-parent">
    <a href="" data-t="top-nav.devcenter">开发者中心</a>

    <ul class="menu vertical">
        <li><a href="#" data-t="top-nav.docs">开发指南</a></li>
        <li><a href="#" data-t="top-nav.apireference">API 文档</a></li>
        <li><a href="#" data-t="top-nav.download">SDK 下载</a></li>
        <li class="divider"><a href="#" data-t="top-nav.community" target="_blank">开发者社区</a></li>
    </ul>
</li>
<li><a href="#" data-t="top-nav.login">帮助</a></li>
<li><a href="#" data-t="top-nav.login">登录</a></li>
<!--<li style=""><a href="#" class="button cta hollow small" data-t="top-nav.signup" style="border: solid 1px #000000; border-radius: 3px; color: #000000;">注册</a>-->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<!--以下手机端页头-->
<div class="mobile-nav show-for-small-only" id="sidebar-menu">
    <ul>
        <li>
            <dl>
                <dt data-t="top-nav.features"><a>产品</a></dt>
                <dd><a href="#">-聚合支付</a></dd>
                <dd><a href="#">-账户系统</a></dd>
                <dd><a href="#">-商户系统</a></dd>
                <dd><a href="#">-大数据商业智能系统</a></dd>
            </dl>
        </li>
        <li><a href="#">解决方案</a></li>
        <li class="divider"><a href="#">Apple Pay</a></li>
        <li><a href="#" target="_blank" data-t="top-nav.help">帮助中心</a></li>
        <li class="divider"><a href="#" data-t="top-nav.documentation">开发者中心</a></li>
        <li><a href="#" data-t="top-nav.login">登入</a></li>
        <!--<li class="divider"><a href="#" data-t="top-nav.signup">注册</a></li>-->
    </ul>
</div>
<!--以上手机端页头-->



<!--一下是注册表格-->
<div class="info-img-6">
<div id="name_1">
	<div id="h2">
		<h2 id="" style="margin-top: 7px;">登录</h2>
    		<a id="2_W" title="二维码登录在这里！" style="font-size: 40px;float: right;"><i class="fa fa-qrcode" aria-hidden="true" ></i></a>
	</div>
    <form id="form">
        <!--<table border="1" width="60%" align="center" cellpadding="5" cellspacing="0">-->
            <!--邮箱-->
            <div class="y_box">
                <span class="left_1">
                    <i class="fa fa-envelope-o " aria-hidden="true"></i>
                    <!--<i class="fa fa-camera-retro fa-lg"></i>-->  
                </span>
                <div class="right_1">
                    <input type="email" name="username" id="youxiang" placeholder="请输入您的登录邮箱" > 
                </div>
            </div>
                <span id="youxiang_" style="color: red;"></span>
                <!--密码-->
            <div class="password_box">
                <span class="left_1">
                    <!--<i class="fa fa-briefcase" aria-hidden="true"></i>-->
                    <!--<i class="fa fa-check-square fa-2x" aria-hidden="true"></i>-->
                    <i class="fa fa-key" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="password" name="password" id="password" placeholder="请输入您的登录密码">
                </span>
            </div>
                <span id="passwordSpan"></span>
                <!--验证码-->
            <div class="yanzheng_box">
                <span class="left_1">
                    <i class="fa fa-shield" aria-hidden="true"></i>
                </span>
                <span class="right_1">
                    <input type="text" name="phone" id="yanzheng" placeholder="请输入验证码">
                </span>
            </div>
                    <span id="phonelSpan"></span>
            <div style="border-bottom: none;margin-bottom: 50px;">
                <span colspan="2" align="center" onclick="test()" id="button_1" style="text-align: center;margin: 27px 0 15px 0;">
                    确认注册
                </span>
                <p><a href="" style="color: #888;">忘记密码？</a>   <a href="er-.html" style="float: right;">立即注册</a> </p>
            </div>
    </form>
</div>

</div>




<script src="js/j1.js"></script>
              
<script type="text/javascript">

window.onload = function(){
     //通过ID或名字获取每个对象
  var youxiang = document.getElementById("youxiang");//邮箱
  var password = document.getElementById("password");//mima
  
  var yanzheng = document.getElementById("yanzheng");//验证

  //设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法
  youxiang.onblur = checkUsername;
  password.onblur = checkPassword;
 
  yanzheng.onblur = check; 
  //设置每个对象的onblur事件(对象获取焦点时发生),并调用各自的方法
  youxiang.onfocus = checkUsername_;
  password.onfocus = checkPassword_;
   
  yanzheng.onfocus = check_;
  //每个onblur事件的方法,
  //邮箱
  function checkUsername_(){
      
//    var emailObjValue = youxiang.value;
//    var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/;
//    var msg ='<i class="fa fa-hand-peace-o" aria-hidden="true"></i>'; 
   var y_box = document.getElementsByClassName("y_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-envelope-o")[0];
   y_box.style = "border-bottom: solid 2px rgb(81,184,242);"
   youxiang_text.style = "color: rgb(81,184,242); font-size:20px"
//    console.log(youxiang_text)

  }   
//密码
  function checkPassword_(){
   var y_box = document.getElementsByClassName("password_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[0];
   y_box.style = "border-bottom: solid 2px rgb(81,184,242);"
   youxiang_text.style = "color: rgb(81,184,242);font-size:20px "
  }
  

//验证码
function check_(){
    var y_box = document.getElementsByClassName("yanzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-shield")[0];
    y_box.style = "border-bottom: solid 2px rgb(81,184,242);"
    youxiang_text.style = "color: rgb(81,184,242); font-size:20px;"
  }




  //每个onblur事件的方法,2个方法-------------------------------------------------------------
  //邮箱验证方法
  function checkUsername(){
 
   var y_box = document.getElementsByClassName("y_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-envelope-o")[0];
   youxiang_text.style = "color: #333;font-size:16px;"
   y_box.style = "border-bottom: solid 1px #333;"

  }

  
//密码验证方法
  function checkPassword(){

   var y_box = document.getElementsByClassName("password_box")[0];
   var youxiang_text = document.getElementsByClassName("fa-key")[0];
   y_box.style = "border-bottom: solid 1px #333;"
   youxiang_text.style = "color: #333;font-size:16px; "
 
  }


//验证码验证方法
function check(){
    var y_box = document.getElementsByClassName("yanzheng_box")[0];
    var youxiang_text = document.getElementsByClassName("fa-shield")[0];
    y_box.style = "border-bottom: solid 1px #333;"
    youxiang_text.style = "color: #333; font-size:16px;"
    /*
    验证码的代码
    */ 

  }
 
 }


//--------------------------------------------------提交前检测数据-----------------------------------------------
//-----------------------------------------------------提交方法-------------------------------------------------
   


 
</script>

</body>

</html>